<template>
  <div class="headers">
    <div class="left">
      <div class="leftImageListTextTemperature">
        <div class="imageList">
          <div class="image" v-for="(item, index) in img" :key="index">
            <img
              :src="item"
              mode="aspectFit|aspectFill|widthFix"
              lazy-load="false"
            />
          </div>
        </div>
        <div class="text">晴</div>
        <div class="temperature">21~28℃</div>
      </div>
    </div>
    <div class="right">
      <div class="header_left">
        <div class="date">{{ getCurrentDateTimes.formattedDate }}</div>
        <div class="week date">{{ getCurrentDateTimes.dayOfWeek }}</div>
        <div class="time">{{ getCurrentDateTimes.formattedTime }}</div>
      </div>
    </div>
    <div></div>
  </div>
</template>
<script>
export default {
  name: "headers",
  data() {
    return {
      img: [
        require("@/assets/tito/icon-qing.png"),
        require("@/assets/tito/icon-yin.png"),
        require("@/assets/tito/icon-yu.png"),
        require("@/assets/tito/icon-xue.png"),
      ],
      //时间
      getCurrentDateTimes: {
        formattedDate: "",
        dayOfWeek: "",
        formattedTime: "",
      },
    };
  },
  created() {
    setInterval(() => {
      this.getCurrentDateTimes = this.$parseTime();
    }, 1000);
  },
  computed: {},
  components: {},
  mounted() {},
  methods: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.headers {
  height: 100%;
  width: 100%;
  background: url("@/assets/tito/bg-tito.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-between;
  // align-items: center;
  padding: 16px 72px 0;
  box-sizing: border-box;
  .left {
    color: #fff;
    .leftImageListTextTemperature {
      display: flex;
      align-items: center;
      .imageList {
        display: flex;
        .image {
          width: 32px;
          height: 32px;
          margin-right: 16px;
          img {
            width: 100%;
            height: 100%;
            vertical-align: text-top;
          }
        }
      }

      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #d9f0ff;
        margin-right: 32px;
      }
      .temperature {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #d9f0ff;
      }
    }
  }
  .right {
    color: #fff;
    margin-left: auto;
    .header_left {
      display: flex;
      .date {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #acc3d5;
        margin-right: 16px;
      }
      .time {
        margin-left: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 22px;
        color: #d9f0ff;
        letter-spacing: 1px;
        text-shadow: 0px 0px 10px #0091ff, 0px 0px 4px #0091ff;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}
</style>
